<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表的排序</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--遍历数组-->
    <h2>人员列表</h2>
    <ul>
        <li v-for="(item, index) in personList" :key="item.id"> <!--key是每一个li节点的唯一标识-->
            {{item.id}}-{{item.name}}-{{item.age}}--{{index}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    const personList = [
        {"id": 1, "name": "马冬梅", "age": 18, "gender": "女"},
        {"id": 2, "name": "周冬雨", "age": 18, "gender": "女"},
        {"id": 3, "name": "周杰伦", "age": 30, "gender": "男"},
        {"id": 4, "name": "温兆伦", "age": 28, "gender": "男"},
    ]
    const vm_computed = new Vue({
        el: "#root",
        data: {
            personList: personList,
        },
    })
</script>

</body>
</html>